<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <title>测一测您的心理健康状况</title>
    <style>
        /*样式初始化*/
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body {
            color: #333;
            background-image: url('images/bg4.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 100%;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        }

        img {
            border: none;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input,
        textarea,
        select,
        button {
            font-size: 14px;
            outline: none
        }

        table {
            border-collapse: collapse;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            position: relative;
            height: 100%;
            top: 0.8108108108108109rem;
            width: 100%;
        }

        .container .h1 {
            color: #eee;
            font-size: 0.5405405405405406rem;
            font-weight: bold;
            text-align: center;
        }

        .container .test {
            position: absolute;
            width: 8.108108108108109rem;
            left: 50%;
            margin-left: -4.054054054054054rem;
            height: 10.81081081081081rem;
            color: #666;
            border-radius: 0.2702702702702703rem;
            background: #fff;
            transition: all .5s linear;
            box-shadow: 0 0 0.08108108108108109rem 0.02702702702702703rem #eee;
        }

        h2,
        p {
            font-size: 0.4864864864864865rem;
            font-weight: bold;
            padding: 0.5405405405405406rem 0.5405405405405406rem;
        }

        .test p {
            color: #fff;
            border-radius: 0.2702702702702703rem 0.2702702702702703rem 0 0;
            background: #409EFF;
        }

        .test p i {
            font-style: normal;
            font-size: 0.3783783783783784rem;
        }

        .test main {
            padding: 0.5405405405405406rem;
            height: 6.756756756756757rem;
            overflow-y: auto;
        }

        .test main .option {
            font-size: 0.3783783783783784rem;
            margin-bottom: 0.40540540540540543rem;
            padding: 0.21621621621621623rem;
            color: #666;
            border-radius: 0.10810810810810811rem;
        }

        .test footer {
            position: absolute;
            margin-top: 0.2702702702702703rem;
            bottom: 0.2702702702702703rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .test footer div {
            padding: 0.2702702702702703rem 0.5405405405405406rem;
            text-align: center;
            color: #fff;
            background-color: #f56c6c;
            border-radius: 0.13513513513513514rem;
            transition: all .5s linear;
        }

        .submit {
            background-color: #409eff !important;
        }

        .page {
            position: absolute;
            left: 50%;
            color: #fff;
            width: 100%;
            text-align: center;
            margin-left: -50%;
            top: 14.216216216216216rem;
        }

        .active {
            transform: translateY(-27.027027027027028rem) !important;
        }

        .colorActive {
            color: #fff !important;
            background-color: #e6a23c !important;
        }
    </style>
</head>

<body>
    <div class="container " id="app">
        <h1 class="animated fadeInDown h1">测一测您的心理健康状况</h1>
        <div class="test" v-for="(item,index) in testArr" :key="index">
            <p>{{index+1}}、{{item.topic}}</p>
            <main>
                <div class="option" v-for="(ite, i) in item.options" :class="[ite.isSelect?'colorActive':'']" :key="i"
                    @click="select(index,i)">
                    {{ite.option}}
                </div>
            </main>
            <footer>
                <div class="animated prev" :hidden="index==0" @click="prev(index)">上一题</div>
                <div class="animated fadeInRight faster submit" v-if="item.options.filter(ele=>{return ele.isSelect==true}).length>0 && index==testArr.length-1"
                    @click="submitBtn()">提交</div>
            </footer>
        </div>
        <div class="page">
            {{activeIndex}} / {{testArr.length}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    resultContext: '',
                    testArr: [
                        {
                            topic: "您对自己的未来乐观吗？", options: [
                                { option: "A、非常不乐观", score: 1, isSelect: false },
                                { option: "B、不乐观", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、乐观", score: 4, isSelect: false },
                                { option: "E、非常乐观", score: 5, isSelect: false },
                                ]
                        },
                        {
                            topic: "对自己目前的生活状况满意吗？", options: [
                                { option: "A、非常不满意", score: 1, isSelect: false },
                                { option: "B、不满意", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、满意", score: 4, isSelect: false },
                                { option: "E、非常满意", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: '你对自己有信心吗？', options: [
                                { option: "A、非常没有信心", score: 1, isSelect: false },
                                { option: "B、没有信心", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、有信心", score: 4, isSelect: false },
                                { option: "E、非常有信心", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "对自己的日常生活环境感到安全吗？", options: [
                                { option: "A、非常不安", score: 1, isSelect: false },
                                { option: "B、不安", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、安全", score: 4, isSelect: false },
                                { option: "E、非常安全", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: '你有幸福感吗？', options: [
                                { option: "A、非常不幸福", score: 1, isSelect: false },
                                { option: "B、不幸福", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、幸福", score: 4, isSelect: false },
                                { option: "E、非常幸福", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你经常感到精神紧张吗？", options: [
                                { option: "A、非常紧张", score: 1, isSelect: false },
                                { option: "B、紧张", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、不紧张", score: 4, isSelect: false },
                                { option: "E、非常不紧张", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你经常感到心情不好、情绪低落吗？", options: [
                                { option: "A、经常发生", score: 1, isSelect: false },
                                { option: "B、有时候", score: 2, isSelect: false },
                                { option: "C、每天都差不多", score: 3, isSelect: false },
                                { option: "D、很少", score: 4, isSelect: false },
                                { option: "E、几乎没有", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你会经常毫无理由地感到害怕吗？", options: [
                                { option: "A、经常发生", score: 1, isSelect: false },
                                { option: "B、有时候", score: 2, isSelect: false },
                                { option: "C、每天差不多", score: 3, isSelect: false },
                                { option: "D、很少", score: 4, isSelect: false },
                                { option: "E、几乎没有", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你对做过的事情经反复确认才放心吗？", options: [
                                { option: "A、一直是", score: 1, isSelect: false },
                                { option: "B、是", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、不是", score: 4, isSelect: false },
                                { option: "E、一直不是", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你近来的记忆力怎么样？", options: [
                                { option: "A、非常差", score: 1, isSelect: false },
                                { option: "B、差", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、好", score: 4, isSelect: false },
                                { option: "E、非常好", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "与你关系密切的伙伴、朋友多吗？", options: [
                                { option: "A、一个都没有", score: 1, isSelect: false },
                                { option: "B、只有几个", score: 2, isSelect: false },
                                { option: "C、有一些", score: 3, isSelect: false },
                                { option: "D、比较多", score: 4, isSelect: false },
                                { option: "E、非常多", score: 5, isSelect: false },
                            ]
                        },
                        {
                            topic: "你如何评价自己在工作和生活中的担当的角色？", options: [
                                { option: "A、很不称职", score: 1, isSelect: false },
                                { option: "B、不称职", score: 2, isSelect: false },
                                { option: "C、一般", score: 3, isSelect: false },
                                { option: "D、称职", score: 4, isSelect: false },
                                { option: "E、很称职", score: 5, isSelect: false },
                            ]
                        }
                    ],
                    activeIndex: '1'
                }
            },
            methods: {
                /***下一题***/
                next(i) {
                    if(i!=this.testArr.length - 1){
                        this.activeIndex = i + 2;
                    }
                    if (i < this.testArr.length - 1) {
                        let top = 100;
                        $($('.test')[i]).addClass('active');
                        let scale = '1';
                        for (let j = 0; j < this.testArr.length; j++) {
                            //被遮挡的题目
                            if (j > i) {
                                $('.test')[j].style.top = top / 37.5 + 'rem';
                                $('.test')[j].style.transform = "scale(" + scale.toString() + ")";
                                scale = ((scale * 10) - (0.1 * 10)) / 10;
                                top = top - 30;
                            }
                            //只显示3道题
                            if (j > i + 3) {
                                $('.test')[j].style.display = "none";
                            } else {
                                $('.test')[j].style.display = "block";
                            }
                        }
                    }

                },
                /***上一题***/
                prev(i) {
                    this.activeIndex = i;
                    //动画
                    if (i != 0) {
                        let top = 100;
                        $($('.test')[i - 1]).removeClass('active')
                        let scale = '1';
                        for (let j = 0; j < this.testArr.length; j++) {
                            //被遮挡的题目
                            if (j >= i - 1) {
                                $('.test')[j].style.top = top / 37.5 + 'rem';
                                $('.test')[j].style.transform = "scale(" + scale.toString() + ")";
                                scale = ((scale * 10) - (0.1 * 10)) / 10;
                                top = top - 30;
                            }
                            //只显示3道题
                            if (j > i + 1) {
                                $('.test')[j].style.display = "none";
                            } else {
                                $('.test')[j].style.display = "block";
                            }
                        }

                    }
                },
                /***提交***/
                submitBtn() {
                    let sum = 0;
                    for (let i = 0; i < this.testArr.length; i++) {
                        let newArr = this.testArr[i].options.filter(ele => {
                            return ele.isSelect == true;
                        })
                        let scoreArr = newArr.map(ele => {
                            return ele.score;
                        })
                            sum += scoreArr.sort()[scoreArr.length - 1]
                    }

                    location.href = './result.html?sum=' + sum;
                },
                select(index, i) {
                    for(let j=0;j<this.testArr[index].options.length;j++){
                        this.$set(this.testArr[index].options[j], 'isSelect', false);
                    }
                    this.$set(this.testArr[index].options[i], 'isSelect', true);
                    this.next(index);
                },
            },
            mounted() {
                //100便于计算
                let top=100;
                let zIndex=parseInt(this.testArr.length);
                let scale = '1';
                for (let i = 0; i < this.testArr.length; i++) {
                    $('.test')[i].style.top = top / 37.5 + 'rem';
                    $('.test')[i].style.zIndex = zIndex;
                    $('.test')[i].style.transform = "scale(" + scale + ")";
                    //只显示3道题
                    if (i > 2) {
                        $('.test')[i].style.display = "none";
                    } else {
                        $('.test')[i].style.display = "block";
                    }
                    top = top - 30;
                    zIndex--;
                    scale = ((scale * 10) - (0.1 * 10)) / 10;
                }
            }
        })
    </script>
</body>

</html>